<style lang="less" scoped>
@import "@/assets/style/variables.less";

.cate {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    padding: @padd;


    .cate-title {
        color: #585858;

        span {
            color: #666;
        }
    }

    .cate-header {
        margin-top: 15px;

        .el-input {
            width: 260px;
        }

        .el-button {
            margin-left: 15px;
        }
    }

    .cate-main {
        margin-top: 15px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .child {
        margin-top: 20px;
    }

}
</style>
<template>
    <div class="cate">
        <div class="table">
            <h3 class="cate-title">分类导航 <span>#{{ cate }}</span> </h3>
            <div class="cate-header">
                <el-input v-model="text" placeholder="请输入分类名称"></el-input>
                <el-button type="primary" plain @click="addCateFn">添加</el-button>
            </div>
            <div class="cate-main">
                <el-table border :data="tableData" style="width: 100%">
                    <el-table-column align="center" label="序号" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="ID" prop="id" width="80"></el-table-column>
                    <el-table-column align="center" label="分类名称" prop="cate"></el-table-column>
                    <el-table-column align="center" label="子分类" prop="cate_name"></el-table-column>
                    <el-table-column align="right">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <el-dialog title="修改文章分类" :visible.sync="centerDialogVisible" width="30%" center>
                <div>
                    <div class="opt">
                        <el-input v-model="cateTitle" placeholder="请输入文章分类"></el-input>
                    </div>
                    <div class="opt child">
                        <el-input v-model="childTitle" placeholder="请输入文章子分类"></el-input>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button @click="saveEdit" type="primary">保存修改</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { Message, MessageBox } from "element-ui";
import { addCate, listCate, removeCate, modifyCate } from "../api/index"
export default {
    data() {
        return {
            cate: "",
            text: "",
            tableData: [
                // {
                //     id: 1,
                //     cate: "",
                //     cate_name: "",
                // },
            ],

            // 文章分类昵称
            cateTitle: '',
            // 文章子分类
            childTitle: '',
            // 修改的ID
            id: -1,
            centerDialogVisible: false,
        }
    },
    methods: {
        // 获取文章类型
        routerFn() {
            // console.log(this.$route)
            this.cate = this.$route.query.cate
            // console.log(this.cate)
        },
        // 删除导航
        async removeCateFn(id) {
            await removeCate({ id })
                .then(
                    resData => {
                        // console.log(resData);
                        if (resData.code == 200) {
                            Message({
                                type: "success", message: "删除导航成功",
                                showClose: true,
                                offset: 100
                            });
                            this.listCateFn();
                        } else {
                            Message({
                                type: "error", message: "删除导航失败",
                                showClose: true,
                                offset: 100
                            });
                        }
                    }, err => {
                        Message({
                            type: "error", message: "删除导航失败",
                            showClose: true,
                            offset: 100
                        });
                        console.log(err)
                    }
                )
        },
        // 添加导航分类
        async addCateFn() {
            let text = this.text;
            if (text == "") {
                Message({ type: "error", message: "输入框不能为空~" })
                return false;
            }
            await addCate({
                cate: this.cate,
                cate_name: text
            })
                .then(
                    resData => {
                        // console.log(resData);
                        if (resData.code == 200) {
                            Message({
                                showClose: true,
                                offset: 100,
                                type: "success",
                                message: "添加导航成功"
                            })
                            // 重新获取列表
                            this.listCateFn();
                            // 重置输入框
                            this.text = "";
                        }
                    }
                )
        },
        // 点击保存修改
        async saveEdit() {
            let cate = this.cateTitle;
            let cate_name = this.childTitle;
            await this.modifyCateFn(cate, cate_name, this.id)
            this.centerDialogVisible = false;
        },
        // 修改导航分类
        async modifyCateFn(cate, cate_name, id) {
            await modifyCate({ cate, cate_name, id })
                .then(
                    res => {
                        if (res.code == 200) {
                            Message({
                                showClose: true,
                                offset: 100,
                                type: "success",
                                message: "修改导航成功"
                            })
                            this.listCateFn()
                        } else {
                            Message({
                                showClose: true,
                                offset: 100,
                                type: "error",
                                message: "修改导航失败"
                            })
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            offset: 100,
                            type: "error",
                            message: "修改导航失败"
                        })
                        console.log(err)
                    }
                )
        },
        // 导航列表
        async listCateFn() {
            await listCate()
                .then(
                    resData => {
                        // console.log(resData);
                        if (resData.code == 200) {
                            let { result } = resData;
                            // 把符合条件的数据保留下
                            let arr = result.filter(item => {
                                return item.cate == this.cate;
                            })
                            this.tableData = arr;
                        }
                    }
                )
        },
        handleEdit(row) {
            this.centerDialogVisible = true;
            // console.log(row);
            this.cateTitle = row.cate
            this.childTitle = row.cate_name
            this.id = row.id
            // console.log(this.id);
        },
        handleDelete(row) {
            MessageBox.confirm('此操作将永久删除该导航, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = row.id;
                this.removeCateFn(id);
            }).catch(() => {
                Message({
                    type: 'info',
                    message: '已取消删除',
                    showClose: true,
                    offset: 100
                });
            });
        }
    },
    created() {
        this.listCateFn();
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute.query.cate)
                if (newRoute.query.cate) {
                    this.$store.commit("addTab", newRoute);
                }

                this.routerFn()
                this.listCateFn()
            }
        }
    }
}

</script>